<template>
  <div class="home_div">
    <div class="map_title">
      <h3>JSAPI Vue2地图组件示例</h3>
    </div>
    <div id="container"></div>
    <div id="info"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

let content = [
  "<div class='input-card content-window-card'><div>" +
  "<img style=\"float:left;width:67px;height:16px;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div><br/> " +
  "<div style=\"padding:7px 0 0 0;\"><h4>高德软件</h4>" +
  "<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>" +
  "<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>"
];
export default {
  name: "MapContainer",
  data() {
    return {
      map: null,
    }
  },
  created() {

  },
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: '8c9f5ce70781148a6e11f11c11c8bcba',   // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0"
        },
      }).then((AMap) => {
        //设置地图容器id
        let aMap = new AMap.Map("container", {
          viewMode: "3D", //是否为3D地图模式
          zoom: 13, //初始化地图级别
          zooms: [2, 22],
          center: [114.818186, 34.815199], //初始化地图中心点位置
          resizeEnable: true //可缩放
        });
        this.map = aMap

        // 创建 infoWindow 实例
        let infoWindow = new AMap.InfoWindow({
          anchor: 'top-right', //信息框显示位置
          content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
        });

        let clickHandler = function (e) {
          console.log('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');

          infoWindow.open(aMap, [114.818186, 34.815199]);
        };

        // 绑定事件
        //this.map.on('click', clickHandler);

        //点标记
        let marker = new AMap.Marker({
          position: new AMap.LngLat(114.818186, 34.815199),   // 经纬度对象，也可以是经纬度构成的一维数组[114.818186,34.815199]
          title: '兰考站',
          icon: '//vdata.amap.com/icons/b18/1/2.png', //添加Icon图标URL
          //content: '<div style="font-size: 10px;width: 100px">内容</div>' //标记内容，可以覆盖icon显示
        });

        marker.on('click', clickHandler);
        let maps = this.map.add(marker); //将创建的点标记添加到已有的地图实例

        // path 是驾车导航的起、途径和终点，最多支持16个途经点
        let path = []
        path.push([114.818186, 34.815199])
        path.push([114.819227, 34.820469])
        path.push([114.822445, 34.824238])
        path.push([114.82266, 34.833186])
        //路线规划
        this.map.plugin('AMap.DragRoute', function () {
          let route = new AMap.DragRoute(maps, path, AMap.DrivingPolicy.LEAST_FEE)
          // 查询导航路径并开启拖拽导航
          route.search()
        })
        //路线样式
        let polyLine = new AMap.Polyline({
          path: path,
          strokeWeight: 5,
          borderWeight: 5, // 线条宽度，默认为 1
          strokeStyle: "solid",
          strokeColor: '#DC143C', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        })
        this.map.add(polyLine)

        //实例化城市查询类
        this.map.plugin('AMap.Geolocation', function () {
          let geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量
            offset: [10, 20],
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            position: 'RB'
          })

          geolocation.getCurrentPosition(function (status, result) {
            if (status == 'complete') {
              onComplete(result)
            } else {
              onError(result)
            }
          });

          function onComplete(data) {
            // data是具体的定位信息
            console.log(data)
          }

          function onError(data) {
            // 定位出错
            console.error(data)
          }
        })

      }).catch(e => {
        console.log(e);
      })
    },
  }
}
</script>

<style scoped>
.home_div {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.map_title {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  background-color: rgba(27, 25, 27, 0.884);
}

h3 {
  position: absolute;
  left: 10px;
  z-index: 2;
  color: white;
}
</style>